<template>
    <div v-if="data" class="pages">
        <div class="btn">
            <el-button style=" font-size: 16px; padding: 10px 20px;border-radius: 0; background: #08cfde;color: #000000;"
                type="text" v-if="flag" @click="flag = false">修改</el-button>
            <el-button style=" font-size: 16px; padding: 10px 20px;border-radius: 0; background: #08cfde;color: #000000;"
                type="text" v-else @click="update">确定</el-button>
        </div>
        <div class="page">
            <!-- 公司基本配置 -->
            <div>
                <div>{{ dataname.name }}:</div>
                <div v-if="flag">{{ data.name }}</div>
                <div v-else><el-input v-model="data.name"></el-input></div>
            </div>
            <div>
                <div>{{ dataname.filing_number }}:</div>
                <div v-if="flag">{{ data.filing_number }}</div>
                <div v-else><el-input v-model="data.filing_number"></el-input></div>
            </div>
            <div>
                <div>{{ dataname.us_address }}:</div>
                <div v-if="flag">{{ data.us_address }}</div>
                <div v-else><el-input v-model="data.us_address"></el-input></div>
            </div>
            <div>
                <div>{{ dataname.us_mail }}:</div>
                <div v-if="flag">{{ data.us_mail }}</div>
                <div v-else><el-input v-model="data.us_mail"></el-input></div>
            </div>
            <div>
                <div>{{ dataname.us_phone }}:</div>
                <div v-if="flag">{{ data.us_phone }}</div>
                <div v-else><el-input v-model="data.us_phone"></el-input></div>
            </div>
            <div>
                <div>{{ dataname.us_qq }}:</div>
                <div v-if="flag">{{ data.us_qq }}</div>
                <div v-else><el-input v-model="data.us_qq"></el-input></div>
            </div>
            <div>
                <div>{{ dataname.us_wb }}:</div>
                <div v-if="flag">{{ data.us_wb }}</div>
                <div v-else><el-input v-model="data.us_wb"></el-input></div>
            </div>
            <div>
                <div>{{ dataname.map_name }}:</div>
                <div v-if="flag">{{ data.map_name }}</div>
                <div v-else><el-input v-model="data.map_name"></el-input></div>
            </div>
            <div>
                <div>{{ dataname.map_latitude }}:</div>
                <div v-if="flag">{{ data.map_latitude }}</div>
                <div v-else><el-input v-model="data.map_latitude"></el-input></div>
            </div>
            <div>
                <div>{{ dataname.map_longitude }}:</div>
                <div v-if="flag">{{ data.map_longitude }}</div>
                <div v-else><el-input v-model="data.map_longitude"></el-input></div>
            </div>
        </div>
        <div class="page">
            <div>
                <div>{{ dataname.company_profile }}:</div>
                <div v-if="flag">{{ data.company_profile }}</div>
                <div v-else><el-input type="textarea" v-model="data.company_profile"></el-input></div>
            </div>
        </div>
    </div>
</template>
<script>
import { postpagedata, updateWebConfig } from '@/api/status'
export default {
    data() {
        return {
            data: {},
            dataname: {
                company_profile: "公司简介",//9
                filing_number: "公司备案号",//
                map_latitude: "地图纬度",//2
                map_longitude: "地图经度",//2
                map_name: "地图名称",//2
                name: "公司名称",//
                us_address: "公司地址",//
                us_mail: "公司邮箱",//1
                us_phone: "公司电话",//1
                us_qq: "公司QQ",//1
                us_wb: "公司微博"//1
            },
            flag: true
        }
    },
    created() {
        this.obtain()
    },
    methods: {
        obtain() {
            postpagedata().then(res => {
                this.data = res.data.data
            }).catch(() => {
                this.$message({
                    message: '网络不给力呦',
                    type: 'warning'
                });
            })
        },
        update() {
            updateWebConfig(this.data).then(async () => {
                const data = await postpagedata()
                this.data = data.data.data
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                })
                this.flag = true
            }).catch(() => {
                this.$message({
                    message: '网络不给力呦',
                    type: 'warning'
                });
            })
        }
    },
}
</script>
<style scoped lang="less">
.pages {
    margin: 50px;
    background-color: #fff;
    display: flex;
    justify-content: center;
}

.page {
    width: 500px;
    padding: 10px;
    padding-bottom: 62px;
    padding-left: 20px;
    padding-top: 50px;
    line-height: 3;
    font-size: 18px;
    font-weight: 600;
    // margin-right: 50px;
}

.page>div {
    display: flex;
}

.page>div>div:nth-child(1) {
    width: 120px;
    text-align: right;
    margin-right: 20px;
}

.page>div>div:nth-child(2) {
    width: 400px;
}

.el-input /deep/.el-input__inner {
    width: 300px;
}

/deep/ .el-textarea__inner {
    width: 300px;
    height: 300px;
}

.btn {
    position: absolute;
    top: 130px;
    right: 70px;

    /deep/.el-button--text {
        font-size: 24px;
    }
}
</style>